// 引入 react 依赖
import React, { Component, } from 'react';
import { connect, } from 'react-redux';
import { Text, View, Image, TouchableOpacity, TextInput, ImageBackground, ScrollView, Modal, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions, } from 'react-native-router-flux';
import { Tabs, Toast, List, InputItem, Portal, Checkbox } from '@ant-design/react-native';
import * as ActionTypes from '../../constants/constants.js';

// antd 按需加载

// 引入 处理数据 所需文件
import { login, wechatLogin } from '../../module/module.js';
// import { getUserTkQyk, } from '../Home/module/module.js';
// import { getUserQyk, } from '../CardInfo/module/module.js';
// import { getUserLogin, } from '../Login/module/module.js';


// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, HomeIndicator, } from '../../components/index.js';

// 引入专用组件
import { } from './components';

// 引入工具包
import { loginBg, loginWx } from '../../util/images.js';
import { press, size, saveData, ScreenWidth, ScreenHeight, initUser, loadData, validation, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage, WeChatLogin } from '../../util/utils.js';

class Login extends Component {

  constructor(props) {
    super(props);
    this.state = {
      agreement: false
    };
  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  login() {
    const { dispatch } = this.props;
    const { phone, password, } = this;
    const { agreement } = this.state
    console.log(agreement)
    if (!agreement) {
      Toast.info('请勾选《用户协议》《隐私条款》')
      return 
    }
    if (!phone._lastNativeText) {
      Toast.info('请输入账号', 1);
      return;
    }
    if (!password._lastNativeText) {
      Toast.info('请输入密码', 1);
      return;
    }

    this.loading = Toast.loading('登录中', 0)
    login({
      phone: phone._lastNativeText,
      password: password._lastNativeText,
    }).then((res) => {
      console.log(res, '登录返回结果')
      // console.log('login')
      this.initUser()
    }).catch((error) => {
      Portal.remove(this.loading)
      console.log(error, '失败的地方')
      Toast.info(error.message, 2);
    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  handlerUserTkQyk() {

  }

  initUser() {
    initUser().then(res => {
      Portal.remove(this.loading)
      Actions.mall()
    }).catch((error) => {
      Toast.info('登录失败', 2);
    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  WeChatLogin(type) {
    const { dispatch } = this.props
    const { agreement } = this.state
    console.log(agreement)
    if (!agreement) {
      Toast.info('请勾选《用户协议》《隐私条款》')
      return 
    }
    this.loading = Toast.loading('加载中')
    WeChatLogin().then(res => {
      wechatLogin(res.data).then(wxRes => {
        console.log(wxRes)
        if (wxRes.data.password) {
          Portal.remove(this.loading)
          Actions.registered({ externalId: wxRes.data.externalId })
        } else {
          if (type == 'login') {
            dispatch({
              type: ActionTypes.setToken,
              data: wxRes.data.token
            })
            this.initUser()
          } else {
            Toast.info('该微信账号已绑定，请更换微信号后重试', 2);
          }
        }
      }).catch(error => {
        Portal.remove(this.loading)
      }).finally(() => {
        Portal.remove(this.loading)
      })
    }).catch(error => {
      Portal.remove(this.loading)
    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  render() {
    const { send, checkSjhVisible, checkSjh, info, } = this.state;
    return (
      <View style={Style.container}>
        <ImageBackground source={loginBg} style={{ flex: 1 }}>
          <Status type="light-content" />
          <NavBar
            back={false}
            title="登录"
            type="transparent"
          />
          <ScrollView style={{ flex: 1, flexDirection: 'column', }} contentContainerStyle={{ flex: 1, }} >
            <View style={{ flex: 1, justifyContent: 'center', }}>
              <View
                style={{
                  paddingHorizontal: 40,
                  paddingVertical: 30
                }}
              >
                <View style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  borderBottomWidth: 1,
                  borderBottomColor: '#ececee',
                  marginBottom: 20
                }}
                >
                  <TextInput
                    ref={(r) => this.phone = r}
                    // autoFocus
                    // value={'15010020577'}
                    keyboardType="numeric"
                    placeholder="请输入手机号"
                    placeholderTextColor="#DADADA"
                    style={{
                      flex: 1,
                      fontSize: 14,
                      paddingVertical: 14,
                      borderWidth: 0,
                      paddingHorizontal: 5,
                      color: '#fff',
                    }}
                    underlineColorAndroid="transparent"
                  />
                </View>
                <View style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  borderBottomWidth: 1,
                  borderBottomColor: '#ececee',
                  marginBottom: 20
                }}
                >
                  <TextInput
                    ref={(r) => this.password = r}
                    placeholder="请输入密码"
                    // value={'111111'}
                    placeholderTextColor="#DADADA"
                    secureTextEntry={true}
                    style={{
                      flex: 1,
                      fontSize: 14,
                      paddingVertical: 14,
                      borderWidth: 0,
                      paddingHorizontal: 5,
                      color: '#fff',
                    }}
                    underlineColorAndroid="transparent"
                  />
                </View>
                <TouchableOpacity
                  activeOpacity={0.9}
                  onPress={() => this.login()}
                  style={{
                    marginTop: 15,
                    paddingVertical: 14,
                    paddingHorizontal: 20,
                    backgroundColor: '#fff',
                    borderRadius: 0,
                    alignItems: 'center',
                    justifyContent: 'center',
                    marginBottom: 15,
                  }}
                >
                  <Text style={{ fontSize: size(28), color: '#000', lineHeight: size(30), }}>登录</Text>
                </TouchableOpacity>
                <View style={{
                  marginTop: 10
                }}>
                  <Text style={{ fontSize: 14, color: '#DADADA', lineHeight: 16, }}></Text>
                  <View style={{
                    marginTop: 10,
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}>
                    <TouchableOpacity
                      onPress={() => {
                        this.WeChatLogin('r')
                      }}
                    >
                      <Text style={{ fontSize: 14, color: '#fff', lineHeight: 16, }}>新用户注册</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                      onPress={() => {
                        Actions.phoneLogin()
                      }}
                    >
                      <Text style={{ fontSize: 14, color: '#fff', lineHeight: 16, }}>验证码登录</Text>
                    </TouchableOpacity>
                  </View>
                </View>
                <View style={{
                  alignItems: 'center',
                }}>
                  <View style={{
                    alignItems: 'center',
                    flexDirection: 'row',
                    justifyContent: 'center',
                    marginTop: 30,
                    marginBottom: 15
                  }}>
                    <View style={{
                      flex: 1,
                      height: size(1),
                      backgroundColor: '#DADADA'
                    }} />
                    <Text style={{ fontSize: 14, color: '#DADADA', lineHeight: 16, marginHorizontal: 15 }}>或通过以下方式登录</Text>
                    <View style={{
                      flex: 1,
                      height: size(1),
                      backgroundColor: '#DADADA'
                    }} />
                  </View>
                  <TouchableOpacity
                    style={{
                      width: 44,
                      height: 44,
                      borderRadius: 22,
                      overflow: 'hidden',
                    }}
                    onPress={() => {
                      this.WeChatLogin('login')
                    }}
                  >
                    <View style={{
                      width: 44,
                      height: 44,
                      borderRadius: 22,
                      overflow: 'hidden',
                      backgroundColor: '#fff',
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}>
                      <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={loginWx} />
                    </View>
                  </TouchableOpacity>
                </View>
                <View style={{
                  padding: 15,
                  alignItems: 'center',
                  flexDirection: 'row',
                  justifyContent: 'center',
                }}>
                  <Checkbox
                    checked={this.state.agreement}
                    style={{ color: '#fff' }}
                    onChange={event => {
                      this.setState({ agreement: event.target.checked });
                    }}
                  />
                  <TouchableOpacity
                    onPress={() => {
                      Actions.privacyTerms()
                    }}
                  >
                    <Text style={{ fontSize: 14, color: '#fff', lineHeight: 16, }}>《用户协议》《隐私条款》</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </ScrollView>
        </ImageBackground>
      </View >
    );
  }
}


export default connect(({ user, }) => ({
  user,
}))(pureRender(Login));

